{% extends 'base_dashboard.html' %}
{% load site_tags %}

{% block title %}Review payment — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<div class="mb-3">
  <a href="{% url 'certifications:admin_applications' %}" class="btn btn-link btn-sm px-0">
    <i class="bi bi-arrow-left me-1"></i>Back to applications
  </a>
</div>

<div class="row g-4">
  <div class="col-lg-5">
    <div class="card border-0 shadow-sm rounded-4">
      <div class="card-body p-4">
        <h5 class="fw-bold mb-3">Application</h5>
        <div class="mb-2">
          <div class="small text-muted">Candidate</div>
          <div class="fw-semibold">{{ application.candidate.get_display_name }}</div>
          <div class="small text-muted">{{ application.candidate.email }}</div>
        </div>
        <div class="mb-2">
          <div class="small text-muted">Program</div>
          <div class="fw-semibold">{{ program.title }}</div>
        </div>
        <div class="mb-2">
          <div class="small text-muted">Amount due</div>
          <div class="fw-semibold">{% format_price application.current_fee_due %}</div>
          {% if application.status == 'pending_reattempt_payment' %}
            <span class="badge text-bg-warning">Reattempt fee</span>
          {% endif %}
        </div>
        <div class="mb-2">
          <div class="small text-muted">Status</div>
          <span class="badge text-bg-secondary">{{ application.get_status_display }}</span>
        </div>
        <div class="mb-2">
          <div class="small text-muted">Payment method</div>
          <div>
            {{ application.payment_method|default:"—" }}
            {% if application.payment_kind %}
              <span class="small text-muted">({{ application.payment_kind }})</span>
            {% endif %}
          </div>
        </div>
        {% if application.payment_note %}
        <div class="mb-2">
          <div class="small text-muted">Candidate note</div>
          <div class="small">{{ application.payment_note }}</div>
        </div>
        {% endif %}
        {% if application.payment_rejection_reason %}
        <div class="alert alert-warning small mb-0 mt-3">
          <strong>Previous rejection:</strong> {{ application.payment_rejection_reason }}
        </div>
        {% endif %}
      </div>
    </div>

    {% if can_review %}
    <div class="card border-0 shadow-sm rounded-4 mt-3">
      <div class="card-body p-4">
        <h6 class="fw-bold mb-3">Review decision</h6>
        <p class="small text-muted">
          Check the payment screenshot on the right before approving.
          Stripe payments are approved automatically — this is for manual transfers only.
        </p>
        <form method="post" action="{% url 'certifications:admin_approve' application.pk %}" class="mb-3">
          {% csrf_token %}
          <button class="btn btn-success w-100 fw-semibold"
                  onclick="return confirm('Approve this payment? The candidate will be able to schedule their test.');">
            <i class="bi bi-check-circle me-1"></i>Approve payment
          </button>
        </form>
        <hr>
        <form method="post" action="{% url 'certifications:admin_reject' application.pk %}">
          {% csrf_token %}
          <label class="form-label small fw-semibold">Reject reason (required)</label>
          <textarea name="rejection_reason" class="form-control mb-2" rows="3"
                    placeholder="e.g. Screenshot unclear / wrong amount / no receipt visible"
                    required></textarea>
          <button class="btn btn-outline-danger w-100"
                  onclick="return confirm('Reject this proof? The candidate must upload a new screenshot.');">
            <i class="bi bi-x-circle me-1"></i>Reject payment proof
          </button>
        </form>
      </div>
    </div>
    {% elif application.status == 'pending_payment' or application.status == 'pending_reattempt_payment' %}
    <div class="alert alert-secondary mt-3 mb-0">
      No payment screenshot uploaded yet. Wait for the candidate to submit proof,
      or they can pay via Stripe (auto-approved).
    </div>
    {% endif %}
  </div>

  <div class="col-lg-7">
    <div class="card border-0 shadow-sm rounded-4">
      <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h5 class="fw-bold mb-0">Payment proof</h5>
          {% if application.payment_proof %}
          <a href="{{ application.payment_proof.url }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary">
            <i class="bi bi-box-arrow-up-right me-1"></i>Open full size
          </a>
          {% endif %}
        </div>
        {% if application.payment_proof %}
          <a href="{{ application.payment_proof.url }}" target="_blank" rel="noopener">
            <img src="{{ application.payment_proof.url }}"
                 alt="Payment proof"
                 class="img-fluid rounded-3 border"
                 style="max-height:70vh;width:100%;object-fit:contain;background:#f8fafc;">
          </a>
        {% else %}
          <div class="text-center text-muted py-5">
            <i class="bi bi-image display-6 d-block mb-2"></i>
            No screenshot attached.
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}